class FlipClock {
    constructor() {
        // 选择并存储时钟各个部分的DOM元素
        this.hoursTop = document.querySelector('.hours .top');
        this.hoursBottom = document.querySelector('.hours .bottom');
        this.minutesTop = document.querySelector('.minutes .top');
        this.minutesBottom = document.querySelector('.minutes .bottom');
        this.secondsTop = document.querySelector('.seconds .top');
        this.secondsBottom = document.querySelector('.seconds .bottom');
        
        // 初始化上一次的时间值
        this.lastHours = -1;
        this.lastMinutes = -1;
        this.lastSeconds = -1;
        
        // 立即更新时间并设置定时器每秒更新一次
        this.updateTime();
        setInterval(() => this.updateTime(), 1000);
    }
    
    updateTime() {
        // 获取当前时间
        const now = new Date();
        // 格式化时、分、秒，确保它们都是两位数
        const hours = String(now.getHours()).padStart(2, '0');
        const minutes = String(now.getMinutes()).padStart(2, '0');
        const seconds = String(now.getSeconds()).padStart(2, '0');

        const lastTime = new Date(now.getTime() - 1000);
        const last_hours = String(lastTime.getHours()).padStart(2, '0');
        const last_minutes = String(lastTime.getMinutes()).padStart(2, '0');
        const last_seconds = String(lastTime.getSeconds()).padStart(2, '0');
        
        // 更新小时
        if (hours !== this.lastHours) {
            this.flip(this.hoursTop, this.hoursBottom, last_hours,hours);
            this.lastHours = hours;
        }
        
        // 更新分钟
        if (minutes !== this.lastMinutes) {
            this.flip(this.minutesTop, this.minutesBottom, last_minutes,minutes);
            this.lastMinutes = minutes;
        }
        
        // 更新秒数
        if (seconds !== this.lastSeconds) {
            this.flip(this.secondsTop, this.secondsBottom, last_seconds,seconds);
            this.lastSeconds = seconds;
        }
    }
    
    flip(topElement, bottomElement, lastValue,nowValue) {
        // 获取翻转元素
        const topFlip = topElement.parentNode.querySelector('.top-flip');
        const bottomFlip = bottomElement.parentNode.querySelector('.bottom-flip');

        // 移除旧的动画类
        topFlip.classList.remove('flip-top');
        bottomFlip.classList.remove('flip-bottom');
        
        // 强制重排
        void topFlip.offsetHeight;
        void bottomFlip.offsetHeight;
        
        // 更新顶部卡片
        topFlip.textContent = lastValue;
        topElement.textContent = lastValue;
        bottomFlip.textContent = lastValue;
        bottomElement.textContent = lastValue;


        // 先播放top-flip动画
        requestAnimationFrame(() => {
            // 添加top-flip动画
            topFlip.classList.add('flip-top');
            //TODO 播放顶部翻页动画
            topElement.textContent = nowValue;

            // 监听top-flip动画完成
            topFlip.addEventListener('animationend', function onTopAnimationEnd() {
                // 更新文本
                topFlip.textContent = nowValue;

                // 移除监听器和动画类
                topFlip.removeEventListener('animationend', onTopAnimationEnd);
                topFlip.classList.remove('flip-top');
                // 播放bottom-flip动画
                bottomFlip.classList.add('flip-bottom');
                
                //TODO 播放底部翻页动画
                bottomFlip.textContent = nowValue;
                // 监听bottom-flip动画完成
                bottomFlip.addEventListener('animationend', function onBottomAnimationEnd() {
                    //更新文本
                    bottomElement.textContent = nowValue;
                    // 移除监听器和动画类
                    bottomFlip.removeEventListener('animationend', onBottomAnimationEnd);
                    bottomFlip.classList.remove('flip-bottom');
                });
            });
        });
    }
}

// 初始化时钟
new FlipClock();

// 全屏功能
const fullscreenBtn = document.getElementById('fullscreen-btn');
const root = document.documentElement;

fullscreenBtn.addEventListener('click', () => {
    if (!document.fullscreenElement &&
        !document.webkitFullscreenElement &&
        !document.mozFullScreenElement) {
        // 进入全屏
        if (root.requestFullscreen) {
            root.requestFullscreen();
        } else if (root.webkitRequestFullscreen) {
            root.webkitRequestFullscreen();
        } else if (root.mozRequestFullScreen) {
            root.mozRequestFullScreen();
        }
        // 更新图标为退出全屏
        fullscreenBtn.querySelector('svg path').setAttribute('d',
            'M8 3v3a2 2 0 0 1-2 2H3m18 0h-3a2 2 0 0 1-2-2V3m0 18v-3a2 2 0 0 1 2-2h3M3 16h3a2 2 0 0 1 2 2v3'
        );
    } else {
        // 退出全屏
        if (document.exitFullscreen) {
            document.exitFullscreen();
        } else if (document.webkitExitFullscreen) {
            document.webkitExitFullscreen();
        } else if (document.mozCancelFullScreen) {
            document.mozCancelFullScreen();
        }
        // 更新图标为进入全屏
        fullscreenBtn.querySelector('svg path').setAttribute('d',
            'M8 3H5a2 2 0 0 0-2 2v3m18 0V5a2 2 0 0 0-2-2h-3m0 18h3a2 2 0 0 0 2-2v-3M3 16v3a2 2 0 0 0 2 2h3'
        );
    }
});

// 主题功能
const themeBtn = document.getElementById('theme-btn');
const themeModal = document.getElementById('theme-modal');
const themeOptions = document.querySelectorAll('.theme-option');

// 从localStorage加载主题
const savedTheme = localStorage.getItem('clock-theme');
if (savedTheme) {
    document.body.className = savedTheme;
}

// 打开主题选择弹窗
themeBtn.addEventListener('click', () => {
    themeModal.classList.add('show');
});

// 点击弹窗外部关闭弹窗
themeModal.addEventListener('click', (e) => {
    if (e.target === themeModal) {
        themeModal.classList.remove('show');
    }
});

// 主题切换
themeOptions.forEach(option => {
    option.addEventListener('click', () => {
        const theme = option.dataset.theme;
        document.body.className = `theme-${theme}`;
        localStorage.setItem('clock-theme', `theme-${theme}`);
        themeModal.classList.remove('show');
    });
});

// 更新日期显示
function updateDate() {
    const solarDateEl = document.querySelector('.solar-date');
    const lunarDateEl = document.querySelector('.lunar-date');
    
    // 获取当前日期
    const now = new Date();
    const year = now.getFullYear();
    const month = now.getMonth() + 1;
    const date = now.getDate();
    const day = now.getDay();
    const weekDays = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
    
    // 更新阳历日期
    solarDateEl.textContent = `${year}年${month}月${date}日 ${weekDays[day]}`;
    
    // 更新农历日期
    const lunar = Lunar.fromDate(now);
    const lunarYear = lunar.getYearInChinese();
    const lunarMonth = lunar.getMonthInChinese();
    const lunarDay = lunar.getDayInChinese();
    lunarDateEl.textContent = `农历 ${lunarYear}年${lunarMonth}月${lunarDay}`;
}

// 初始化时更新日期
updateDate();

// 每分钟更新一次日期
setInterval(updateDate, 60000);
